import { Dimensions, ViewStyle, StyleSheet, TextStyle, Button } from 'react-native';
import { themeColors, definedColors } from './color'
import { Colors } from 'react-native/Libraries/NewAppScreen';

const DESIGN_WIDTH = 750
const DESIGN_HEIGHT = 1334

const windowWidth = Dimensions.get('window').width
const windowHeight = Dimensions.get('window').height

const designScale = DESIGN_WIDTH / windowWidth

function translateSize(length: number): number {
	return Math.floor(length / designScale)
}

interface CommonStyle {
	containerColumn: ViewStyle
	containerRow: ViewStyle
	shortBar: ViewStyle
	ringButton: ViewStyle
	tag: TextStyle
	redTag: TextStyle
	headerRight: ViewStyle
	headerFont: TextStyle
	titleTag: ViewStyle
	noDataWarn: TextStyle
	amountStyle: TextStyle
	successText: TextStyle
	loginOutContainer: TextStyle
	loginOutBtn: ViewStyle
	loginOutBtnText: TextStyle
	roomStyle: TextStyle
}

const commonStyle = StyleSheet.create<CommonStyle>({
	containerColumn: {
		width: '100%',
		flexDirection: 'column',
		backgroundColor: '#fff',
	},
	containerRow: {
		width: '100%',
		flexDirection: 'row',
		flexWrap: 'nowrap',
		alignItems: 'center',
		backgroundColor: '#fff',
	},
	shortBar: {
		backgroundColor: themeColors.primary,
		width: translateSize(8),
		height: translateSize(28),
		borderRadius: translateSize(4),
	},
	ringButton: {
		backgroundColor: definedColors.white,
		borderColor: themeColors.primary,
		height: translateSize(40),
		borderRadius: translateSize(20),
		borderWidth: 1,
		flexDirection: 'row',
		alignItems: 'center',
	},
	tag: {
		paddingHorizontal: translateSize(15),
		paddingVertical: translateSize(5),
		borderColor: definedColors.seaGreen,
		borderWidth: 1,
		borderRadius: translateSize(4),
		fontSize: translateSize(24),
		color: definedColors.seaGreen,
	},
	redTag: {
		paddingHorizontal: translateSize(15),
		paddingVertical: translateSize(5),
		borderColor: definedColors.red1,
		borderWidth: 1,
		borderRadius: translateSize(4),
		fontSize: translateSize(24),
		color: definedColors.red1,
	},
	headerRight: {
		paddingHorizontal: translateSize(32),
		paddingVertical: translateSize(10),
	},
	headerFont: {
		fontSize: translateSize(32),
		color: definedColors.white,
	},
	titleTag: {
		paddingHorizontal: translateSize(20),
		paddingVertical: translateSize(5),
		borderRadius: translateSize(30),
		fontSize: translateSize(20),
		color: definedColors.white,
		backgroundColor: definedColors.orange,
	},
	noDataWarn: {
		color: definedColors.orange,
		textAlign: "center"
	},
	amountStyle: {
		fontSize: translateSize(52),
		marginLeft: translateSize(30),
		marginTop: translateSize(20),
	},
	roomStyle: {
		fontSize: translateSize(32),
	},
	successText: {
		color: definedColors.gray33,
		textAlign: "center"
	},
	loginOutContainer: {
		display: 'flex',
		flexDirection: 'column',
		alignItems: 'center',
	},
	loginOutBtn: {
		backgroundColor: definedColors.firebrick,
		marginTop: translateSize(200),
		width: '90%'
	},
	loginOutBtnText: {
		color: definedColors.white,
		fontSize: translateSize(34),
	},
})

export { commonStyle, translateSize, themeColors, definedColors }
